<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>编辑角色</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :label-position="right"
      status-icon
      style="width: 80%"
    >
      <el-form-item label="角色名称" prop="role_name">
        <el-input v-model="ruleForm.role_name" />
      </el-form-item>
      <el-form-item label="关联管理员" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="PC后台权限" prop="PC_Permission">
        <el-tree
          :data="PC_data"
          :props="PC_defaultProps"
          show-checkbox
          @check-change="PC_handleCheckChange"
          node-key="id"
          ref="PC_treeRef"
          :default-checked-keys="ruleForm.PC_Permission"
        />
      </el-form-item>
      <el-form-item label="移动端后台权限" prop="webapp_Permission">
        <el-tree
          :data="webapp_data"
          :props="webapp_defaultProps"
          show-checkbox
          @check-change="webapp_handleCheckChange"
          node-key="id"
          ref="webapp_treeRef"
          :default-checked-keys="ruleForm.webapp_Permission"
        />
      </el-form-item>
      <el-form-item label="操作权限" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="导出数据" name="type" />
          <el-checkbox label="删除数据" name="type" />
          <el-checkbox label="分配客服" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import axios from "axios";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus";

const router = useRouter();
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "",
  role_name: "",
  PC_Permission: "",
  webapp_Permission: "",
  type: [],
});
const update_date = async () => {
  var { data } = await axios.get(
    `http://localhost:5200/roles/${route.query.id}`
  );
  console.log(data);
  ruleForm.name=data.name
  ruleForm.role_name=data.role_name
  ruleForm.PC_Permission=data.PC_Permission
  ruleForm.webapp_Permission=data.webapp_Permission
  ruleForm.type=data.type
};
// 表单验证
const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: "请输入你的角色名称",
      trigger: "blur",
    },
    { min: 1, max: 15, message: "请输入 1 to 15字符", trigger: "blur" },
  ],
  role_name: [
    {
      required: true,
      message: "请填写关联管理员",
      trigger: "blur",
    },
    { min: 1, max: 15, message: "请输入 1 to 15字符", trigger: "blur" },
  ],
});

// PC端树状控件
const PC_treeRef = ref();
const PC_handleCheckChange = (
  PC_data: any,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(PC_data);
  console.log(PC_treeRef.value.getCheckedKeys(PC_data), 123);

  ruleForm.PC_Permission = PC_treeRef.value.getCheckedKeys(PC_data);
};

const PC_defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
// :default-checked-keys="[ruleForm.PC_Permission]" //default-checked-keys：默认勾选的节点key数组   treeRef.value.getCheckedNodes(PC_data) 获取选中的key

const PC_data = [
  {
    id: 1,
    label: "用户",
    children: [
      {
        id: 9,
        label: "会员管理",
        children: [
          {
            id: 10,
            label: "企业会员",
          },
          {
            id: 11,
            label: "个人会员",
          },
          {
            id: 12,
            label: "无效会员",
          },
        ],
      },
      {
        id: 13,
        label: "个人简历管理",
        children: [
          {
            id: 14,
            label: "全部简历",
          },
          {
            id: 15,
            label: "简历回收站",
          },
          {
            id: 16,
            label: "投递简历记录",
          },
        ],
      },
      {
        id: 17,
        label: "企业信息管理",
        children: [
          {
            id: 18,
            label: "全部线索",
          },
          {
            id: 19,
            label: "我的线索",
          },
          {
            id: 20,
            label: "线索公海",
          },
          {
            id: 21,
            label: "全部客户",
          },
          {
            id: 22,
            label: "客户公海",
          },
          {
            id: 23,
            label: "CRM设置",
          },
          {
            id: 24,
            label: "CRM回收站",
          },
        ],
      },
      {
        id: 25,
        label: "职位信息管理",
        children: [
          {
            id: 26,
            label: "职位管理",
          },
          {
            id: 27,
            label: "面试邀请",
          },
          {
            id: 28,
            label: "简历下载",
          },
        ],
      },
      {
        id: 29,
        label: "账号注销申请",
        children: [
          {
            id: 30,
            label: "账号注销申请",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "业务",
    children: [
      {
        id: 31,
        label: "企业业务管理",
        children: [
          {
            id: 32,
            label: "套餐管理",
          },
          {
            id: 33,
            label: "积分管理",
          },
          {
            id: 34,
            label: "订单管理",
          },
          {
            id: 35,
            label: "企业推广",
          },
          {
            id: 36,
            label: "实地认证",
          },
        ],
      },
      {
        id: 37,
        label: "个人业务管理",
        children: [
          {
            id: 38,
            label: "订单管理",
          },
          {
            id: 39,
            label: "积分管理",
          },
          {
            id: 40,
            label: "简历推广",
          },
          {
            id: 41,
            label: "委托投递",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "内容",
    children: [
      {
        id: 42,
        label: "广告管理",
        children: [
          {
            id: 43,
            label: "广告列表",
          },
          {
            id: 44,
            label: "广告位",
          },
        ],
      },
      {
        id: 45,
        label: "公告管理",
        children: [
          {
            id: 46,
            label: "公告列表",
          },
        ],
      },
      {
        id: 47,
        label: "资讯管理",
        children: [
          {
            id: 48,
            label: "资讯列表",
          },
          {
            id: 49,
            label: "资讯分类",
          },
        ],
      },
      {
        id: 50,
        label: "说明页管理",
        children: [
          {
            id: 51,
            label: "说明页列表",
          },
        ],
      },
      {
        id: 52,
        label: "Hr工具箱",
        children: [
          {
            id: 53,
            label: "Hr工具箱列表",
          },
          {
            id: 54,
            label: "Hr工具箱分类",
          },
        ],
      },
      {
        id: 55,
        label: "友情链接",
        children: [
          {
            id: 56,
            label: "友情链接列表",
          },
        ],
      },
      {
        id: 57,
        label: "帮助中心",
        children: [
          {
            id: 58,
            label: "信息管理",
          },
          {
            id: 59,
            label: "分类管理",
          },
        ],
      },
      {
        id: 60,
        label: "账号申诉",
        children: [
          {
            id: 61,
            label: "信息管理",
          },
        ],
      },
      {
        id: 62,
        label: "投诉建议",
        children: [
          {
            id: 63,
            label: "举报信息",
          },
          {
            id: 64,
            label: "投诉客服",
          },
          {
            id: 65,
            label: "意见建议",
          },
        ],
      },
    ],
  },
  {
    id: 4,
    label: "移动端",
    children: [
      {
        id: 66,
        label: "手机触屏端",
        children: [
          {
            id: 67,
            label: "基础配置",
          },
          {
            id: 68,
            label: "个性化首页",
          },
          {
            id: 69,
            label: "页面管理",
          },
        ],
      },
      {
        id: 70,
        label: "微信小程序",
        children: [
          {
            id: 71,
            label: "基础配置",
          },
        ],
      },
      {
        id: 72,
        label: "App",
        children: [
          {
            id: 73,
            label: "基础配置",
          },
        ],
      },
      {
        id: 74,
        label: "第三方配置",
        children: [
          {
            id: 75,
            label: "基础配置",
          },
        ],
      },
    ],
  },
  {
    id: 5,
    label: "画像",
    children: [
      {
        id: 76,
        label: "系统数据总览",
      },
      {
        id: 78,
        label: "简历数据统计",
        children: [
          {
            id: 79,
            label: "简历总览分析",
          },
          {
            id: 80,
            label: "求职者结构",
          },
          {
            id: 81,
            label: "简历流向",
          },
          {
            id: 82,
            label: "热度分析",
          },
        ],
      },
      {
        id: 83,
        label: "企业数据统计",
        children: [
          {
            id: 84,
            label: "企业总览分析",
          },
          {
            id: 85,
            label: "职位总览分析",
          },
          {
            id: 86,
            label: "业务分析",
          },
          {
            id: 87,
            label: "热度分析",
          },
        ],
      },
      {
        id: 88,
        label: "业务成交统计",
      },
      {
        id: 89,
        label: "数据大屏",
      },
    ],
  },
  {
    id: 6,
    label: "应用",
    children: [
      {
        id: 91,
        label: "招聘会",
        children: [
          {
            id: 92,
            label: "招聘会列表",
          },
          {
            id: 93,
            label: "参会企业",
          },
          {
            id: 94,
            label: "展位模板",
          },
          {
            id: 95,
            label: "信息导出",
            children: [
              {
                id: 96,
                label: "文档资料",
              },
              {
                id: 97,
                label: "公众号模板",
              },
            ],
          },
        ],
      },
      {
        id: 98,
        label: "网络招聘会",
        children: [
          {
            id: 99,
            label: "网络招聘会列表",
          },
          {
            id: 100,
            label: "信息导出",
            children: [
              {
                id: 101,
                label: "文档资料",
              },
              {
                id: 102,
                label: "公众号模板",
              },
            ],
          },
        ],
      },
      {
        id: 103,
        label: "外呼中心",
        children: [
          {
            id: 104,
            label: "数据看板",
          },
          {
            id: 105,
            label: "全部外呼",
          },
          {
            id: 106,
            label: "坐席信息",
          },
          {
            id: 107,
            label: "外呼配置",
          },
        ],
      },
      {
        id: 108,
        label: "自由职业",
        children: [
          {
            id: 109,
            label: "项目管理",
          },
          {
            id: 110,
            label: "简历管理",
          },
          {
            id: 111,
            label: "订单管理",
          },
          {
            id: 112,
            label: "广告管理",
          },
          {
            id: 113,
            label: "基础配置",
          },
        ],
      },
      {
        id: 114,
        label: "同城信息",
        children: [
          {
            id: 115,
            label: "数据看板",
          },
          {
            id: 116,
            label: "全部外呼",
          },
          {
            id: 117,
            label: "坐席信息",
          },
          {
            id: 118,
            label: "外呼配置",
          },
        ],
      },
      {
        id: 119,
        label: "校园招聘",
        children: [
          {
            id: 120,
            label: "数据看板",
          },
          {
            id: 121,
            label: "全部外呼",
          },
          {
            id: 124,
            label: "坐席信息",
          },
          {
            id: 125,
            label: "外呼配置",
          },
        ],
      },
      {
        id: 126,
        label: "快招信息",
        children: [
          {
            id: 127,
            label: "数据看板",
          },
          {
            id: 128,
            label: "全部外呼",
          },
          {
            id: 129,
            label: "坐席信息",
          },
          {
            id: 130,
            label: "外呼配置",
          },
        ],
      },
      {
        id: 131,
        label: "视频招聘",
        children: [
          {
            id: 132,
            label: "视频招聘",
          },
          {
            id: 133,
            label: "视频求职",
          },
          {
            id: 134,
            label: "广告管理",
          },
          {
            id: 135,
            label: "功能配置",
          },
        ],
      },
      {
        id: 136,
        label: "地区分站",
        children: [
          {
            id: 137,
            label: "分站管理",
          },
        ],
      },
      {
        id: 138,
        label: "海报设置",
        children: [
          {
            id: 139,
            label: "职位海报",
          },
          {
            id: 140,
            label: "企业海报",
          },
        ],
      },
      {
        id: 141,
        label: "企微管理",
        children: [
          {
            id: 142,
            label: "数据看板",
          },
          {
            id: 143,
            label: "全部外呼",
          },
          {
            id: 144,
            label: "坐席信息",
          },
          {
            id: 145,
            label: "外呼配置",
          },
        ],
      },
      {
        id: 146,
        label: "今日招聘",
        children: [
          {
            id: 147,
            label: "信息列表",
          },
          {
            id: 148,
            label: "基础配置",
          },
        ],
      },
      {
        id: 149,
        label: "求职登记",
        children: [
          {
            id: 150,
            label: "表单设计",
          },
          {
            id: 151,
            label: "字段设置",
          },
          {
            id: 152,
            label: "报名信息",
          },
        ],
      },
      {
        id: 153,
        label: "直播招聘",
        children: [
          {
            id: 154,
            label: "直播场次",
          },
          {
            id: 155,
            label: "基础配置",
          },
        ],
      },
    ],
  },
  {
    id: 7,
    label: "工具",
    children: [
      {
        id: 156,
        label: "优惠券",
        children: [
          {
            id: 157,
            label: "企业会员",
          },
          {
            id: 158,
            label: "个人会员",
          },
          {
            id: 159,
            label: "无效会员",
          },
        ],
      },
      {
        id: 160,
        label: "红包活动",
        children: [
          {
            id: 161,
            label: "全部简历",
          },
          {
            id: 162,
            label: "简历回收站",
          },
          {
            id: 163,
            label: "投递简历记录",
          },
        ],
      },
      {
        id: 164,
        label: "计划任务",
        children: [
          {
            id: 165,
            label: "全部线索",
          },
          {
            id: 166,
            label: "我的线索",
          },
          {
            id: 167,
            label: "线索公海",
          },
          {
            id: 168,
            label: "全部客户",
          },
          {
            id: 169,
            label: "客户公海",
          },
          {
            id: 170,
            label: "CRM设置",
          },
          {
            id: 171,
            label: "CRM回收站",
          },
        ],
      },
      {
        id: 172,
        label: "数据导出",
        children: [
          {
            id: 173,
            label: "职位管理",
          },
          {
            id: 174,
            label: "面试邀请",
          },
          {
            id: 175,
            label: "简历下载",
          },
        ],
      },
      {
        id: 176,
        label: "百度推送",
        children: [
          {
            id: 177,
            label: "URL推送",
          },
        ],
      },
      {
        id: 178,
        label: "即时通讯",
        children: [
          {
            id: 179,
            label: "全部线索",
          },
          {
            id: 180,
            label: "我的线索",
          },
          {
            id: 181,
            label: "线索公海",
          },
          {
            id: 182,
            label: "全部客户",
          },
          {
            id: 183,
            label: "客户公海",
          },
          {
            id: 184,
            label: "CRM设置",
          },
          {
            id: 185,
            label: "CRM回收站",
          },
        ],
      },
      {
        id: 186,
        label: "消息群发",
        children: [
          {
            id: 187,
            label: "职位管理",
          },
          {
            id: 188,
            label: "面试邀请",
          },
          {
            id: 189,
            label: "简历下载",
          },
        ],
      },
      {
        id: 190,
        label: "营销工具",
        children: [
          {
            id: 191,
            label: "职位管理",
          },
          {
            id: 192,
            label: "面试邀请",
          },
          {
            id: 193,
            label: "简历下载",
          },
        ],
      },
      {
        id: 194,
        label: "休眠用户提醒",
        children: [
          {
            id: 195,
            label: "职位管理",
          },
          {
            id: 196,
            label: "面试邀请",
          },
          {
            id: 197,
            label: "简历下载",
          },
        ],
      },
      {
        id: 198,
        label: "短链接",
        children: [
          {
            id: 199,
            label: "职位管理",
          },
          {
            id: 200,
            label: "面试邀请",
          },
          {
            id: 201,
            label: "简历下载",
          },
        ],
      },
      {
        id: 202,
        label: "数据同步",
        children: [
          {
            id: 203,
            label: "职位管理",
          },
          {
            id: 204,
            label: "面试邀请",
          },
          {
            id: 205,
            label: "简历下载",
          },
        ],
      },
      {
        id: 206,
        label: "数据采集",
      },
      {
        id: 207,
        label: "求职群",
      },
    ],
  },
  {
    id: 8,
    label: "系统",
    children: [
      {
        id: 208,
        label: "基础配置",
        children: [
          {
            id: 209,
            label: "假数据",
          },
          {
            id: 210,
            label: "假数据",
          },
          {
            id: 211,
            label: "假数据",
          },
          {
            id: 212,
            label: "假数据",
          },
        ],
      },
      {
        id: 213,
        label: "分类配置",
        children: [
          {
            id: 214,
            label: "地区分类",
          },
          {
            id: 215,
            label: "职位分类",
          },
          {
            id: 216,
            label: "专业分类",
          },
          {
            id: 217,
            label: "其他分类组",
          },
        ],
      },
      {
        id: 218,
        label: "企业业务配置",
        children: [
          {
            id: 219,
            label: "企业总览分析",
          },
          {
            id: 220,
            label: "职位总览分析",
          },
          {
            id: 221,
            label: "业务分析",
          },
          {
            id: 222,
            label: "热度分析",
          },
        ],
      },
      {
        id: 223,
        label: "个人业务配置",
        children: [
          {
            id: 224,
            label: "假数据",
          },
          {
            id: 225,
            label: "假数据",
          },
          {
            id: 226,
            label: "假数据",
          },
          {
            id: 227,
            label: "假数据",
          },
        ],
      },
      {
        id: 228,
        label: "微信平台配置",
        children: [
          {
            id: 229,
            label: "假数据",
          },
          {
            id: 230,
            label: "假数据",
          },
          {
            id: 231,
            label: "假数据",
          },
          {
            id: 233,
            label: "假数据",
          },
        ],
      },
      {
        id: 234,
        label: "系统管理员",
        children: [
          {
            id: 235,
            label: "假数据",
          },
          {
            id: 236,
            label: "假数据",
          },
          {
            id: 237,
            label: "假数据",
          },
          {
            id: 238,
            label: "假数据",
          },
        ],
      },
      {
        id: 239,
        label: "系统日志",
        children: [
          {
            id: 240,
            label: "假数据",
          },
          {
            id: 241,
            label: "假数据",
          },
          {
            id: 242,
            label: "假数据",
          },
          {
            id: 243,
            label: "假数据",
          },
        ],
      },
    ],
  },
];

// PC端树状控件
const webapp_treeRef = ref();
const webapp_handleCheckChange = (
  PC_data: any,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(PC_data);
  console.log(webapp_treeRef.value.getCheckedKeys(PC_data), 123);

  ruleForm.webapp_Permission = webapp_treeRef.value.getCheckedKeys(PC_data);
};

const webapp_defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
const webapp_data = [
  {
    id: 1,
    label: "会员管理",
    children: [
      {
        id: 11,
        label: "企业会员",
      },
      {
        id: 12,
        label: "个人会员",
      },
      {
        id: 13,
        label: "照片/作品",
      },
      {
        id: 14,
        label: "企业管理",
      },
      {
        id: 15,
        label: "职位管理",
      },
      {
        id: 16,
        label: "企业风采",
      },
      {
        id: 17,
        label: "账号注销申请",
      },
    ],
  },
  {
    id: 2,
    label: "业务管理",
    children: [
      {
        id: 21,
        label: "(企业)套餐管理",
      },
      {
        id: 22,
        label: "(企业)订单管理",
      },
      {
        id: 23,
        label: "(企业)开通套餐",
      },
      {
        id: 24,
        label: "(企业)新增推广",
      },
      {
        id: 25,
        label: "(企业)积分增减",
      },
      {
        id: 26,
        label: "(个人)订单管理",
      },
      {
        id: 27,
        label: "(个人)新增推广",
      },
    ],
  },
  {
    id: 3,
    label: "系统工具",
    children: [
      {
        id: 31,
        label: "更新缓存",
      },
      {
        id: 32,
        label: "网站启停",
      },
      {
        id: 33,
        label: "暂停注册",
      },
    ],
  },
];

//确定按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(ruleForm);
      let res = await axios.patch(`http://localhost:5200/roles/${route.query.id}`, {
        ...ruleForm,
      });
      formEl.resetFields();
      router.push("/sys/admin/role");
      if (res.status == 201) {
        ElNotification({
          title: "Success",
          message: `角色名称为${res.data.role_name}修改成功`,
          type: "success",
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
//取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/sys/admin/role");
};
onMounted(() => {
  update_date();
});
</script>

<style></style>
